<template>
  <div>
    <el-button
      type="primary"
      @click="
        dialogVisible = true
      "
      style="margin-left: 40px; margin-bottom: 20px"
    >
      <i class="el-icon-circle-plus-outline"></i>
      增加用户
    </el-button>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search ||
            data.name.toLowerCase().includes(search.toLowerCase()) ||
            data.idCard.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 95%; margin: auto; border-radius: 0.8rem"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="老人姓名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="房间号">
              <span>{{ props.row.roomNumber }}</span>
            </el-form-item>
            <el-form-item label="身份证号">
              <span>{{ props.row.idCard }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="电话号码">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="入院日期">
              <span>{{ props.row.checkInDate }}</span>
            </el-form-item>
            <el-form-item label="生日">
              <span>{{ props.row.birthday }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="老人姓名" prop="name"> </el-table-column>
      <el-table-column label="房间号" prop="roomNumber"> </el-table-column>
      <el-table-column label="电话号码" prop="phone"> </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope={}>
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
          ><i class="el-icon-camera">录入人脸</i></el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="老人信息" :visible.sync="dialogVisible" width="45%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="老人姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="ruleForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNumber">
          <el-select v-model="ruleForm.roomNumber" placeholder="请选择入住房间">
            <el-option label="101" value="101"></el-option>
            <el-option label="102" value="102"></el-option>
            <el-option label="201" value="201"></el-option>
            <el-option label="202" value="202"></el-option>
            <el-option label="303" value="303"></el-option>
            <el-option label="428" value="428"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入住时间" required>
          <el-col :span="9">
            <el-form-item prop="checkInDate">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.checkInDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">----------</el-col>
          <el-col :span="9">
            <el-form-item prop="entertime">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.entertime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="老人生日" required>
          <el-col :span="9">
            <el-form-item prop="leave">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="人脸信息采集" prop="desc">
          <el-button @click="changePage">点击拍照</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑老人信息" :visible.sync="dialog2Visible" width="45%">
      <el-form
        :model="ruleForm2"
        :rules="rules"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="老人姓名" prop="name">
          <el-input v-model="ruleForm2.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm2.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="ruleForm2.idCard"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="ruleForm2.phone"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNumber">
          <el-select v-model="ruleForm2.roomNumber" placeholder="请选择入住房间">
            <el-option label="101" value="101"></el-option>
            <el-option label="102" value="102"></el-option>
            <el-option label="201" value="201"></el-option>
            <el-option label="202" value="202"></el-option>
            <el-option label="303" value="303"></el-option>
            <el-option label="428" value="428"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入住时间" required>
          <el-col :span="9">
            <el-form-item prop="checkInDate">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm2.checkInDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">----------</el-col>
          <el-col :span="9">
            <el-form-item prop="entertime">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm2.entertime"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="老人生日" required>
          <el-col :span="9">
            <el-form-item prop="leave">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm2.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="监护人姓名" prop="name">
          <el-input v-model="ruleForm2.firstGuardianName"></el-input>
        </el-form-item>
        <el-form-item label="与老人关系" prop="sex">
          <el-radio-group v-model="ruleForm2.firstGuardianRelationship">
            <el-radio label="儿子"></el-radio>
            <el-radio label="女儿"></el-radio>
            <el-radio label="孙子"></el-radio>
            <el-radio label="孙女"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="监护人电话" prop="tel">
          <el-input v-model="ruleForm2.firstGuardianPhone"></el-input>
        </el-form-item>
        <el-form-item label="监护人微信">
          <el-input v-model="ruleForm2.firstGuardianWechat"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2('ruleForm2')"
            >编辑完成</el-button
          >
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
          <el-button @click="dialog2Visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 20px;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
export default {
  data() {
    return {
      search: "",
      dialogVisible: false,
      dialog2Visible: false,
      ruleForm: {
        name: "",
        roomNumber: "",
        idCard: "",
        sex: "",
        phone: "",
        checkInDate: "",
        birthday: "",
        entertime: "",
        leavetime: "",
      },
      ruleForm2: {
        name: "",
        roomNumber: "",
        idCard: "",
        sex: "",
        phone: "",
        checkInDate: "",
        birthday: "",
        entertime: "",
        leavetime: "",
        firstGuardianName: "",
        firstGuardianRelationship: "",
        firstGuardianPhone: "",
        firstGuardianWechat: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入老人姓名", trigger: "blur" },
          { min: 2, max: 7, message: "长度为 2 到 7 个汉字", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择老人性别", trigger: "change" }],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "身份证格式不正确", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "电话号码格式不正确", trigger: "blur" },
        ],
        roomNumber: [
          { required: true, message: "请选择入住房间", trigger: "change" },
        ],
        checkInDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        entertime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        birthday: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        leavetime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
      tableData: [
        {
          name: "吕文江",
          roomNumber: "428",
          idCard: "230111198608083212",
          sex: "男",
          phone: "13796122019",
          CheckInDate: "2021-07-18",
          birthday: "2022-07-07",
        },
      ],
      //[{"name":"李华","idCard":"462153196010015137","roomNumber":"410","sex":"f","phone":"13746251348","birthday":"1960-10-01T00:00:00.000+00:00","healthState":"healthy","checkInDate":"2022-07-07T00:00:00.000+00:00","checkOutDate":null,"profilePhoto":null,"imageDir":null,"firstGuardianName":"李小明","firstGuardianRelationship":"儿子","firstGuardianPhone":"13412358467","firstGuardianWechat":"XiaoMing","secondGuardianName":"李大明","secondGuardianRelationship":"儿子","secondGuardianPhone":"13479431205","secondGuardianWechat":"DaMing"},{"name":"蔡明宇","idCard":"230181200107180471","roomNumber":"102","sex":"男","phone":"13796122019","birthday":"2022-07-10T16:00:00.000+00:00","healthState":null,"checkInDate":"2022-07-10T16:00:00.000+00:00","checkOutDate":null,"profilePhoto":null,"imageDir":null,"firstGuardianName":null,"firstGuardianRelationship":null,"firstGuardianPhone":null,"firstGuardianWechat":null,"secondGuardianName":null,"secondGuardianRelationship":null,"secondGuardianPhone":null,"secondGuardianWechat":null},{"name":"CMY","idCard":"230181200107180980","roomNumber":"102","sex":"男","phone":"13796122019","birthday":"2022-07-17T16:00:00.000+00:00","healthState":null,"checkInDate":"2022-07-25T16:00:00.000+00:00","checkOutDate":null,"profilePhoto":null,"imageDir":null,"firstGuardianName":null,"firstGuardianRelationship":null,"firstGuardianPhone":null,"firstGuardianWechat":null,"secondGuardianName":null,"secondGuardianRelationship":null,"secondGuardianPhone":null,"secondGuardianWechat":null}],
      blogData: [],
    };
  },
  created() {
    this.getUsersInfo();
  },
  methods: {
    changePage() {
      this.$router.push({
        name: "采集",
        params: {
          username: this.name,
        },
      });
    },
    getUsersInfo() {
      var that = this;
      this.$axios
        .get("http://zzay0132.mynatapp.cc/elderly/getAll")
        .then((response)=> {
          that.response = response.data;
          this.tableData = response.data.data.info;
          console.log(response.data.data.info);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleEdit(index, row) {
      this.dialog2Visible = true;
      this.ruleForm2.name = row.name;
      this.ruleForm2.phone = row.phone;
      this.ruleForm2.roomNumber = row.roomNumber;
      this.ruleForm2.idCard = row.idCard;
      this.ruleForm2.sex = row.sex;
      this.ruleForm2.CheckInDate = row.CheckInDate;
      this.ruleForm2.birthday = row.birthday;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post("http://zzay0132.mynatapp.cc/elderly/delete", {
              name: row.name,
              idCard: row.ruleForm.idCard,
              roomNumber: row.ruleForm.roomNumber,
              sex: row.ruleForm.sex,
              phone: row.ruleForm.phone,
              birthday: row.ruleForm.birthday,
              checkInDate: row.ruleForm.CheckInDate,
            })
            .then((response) => {
              that.response = response.data();
              alert(that.response.msg);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post("http://zzay0132.mynatapp.cc/elderly/add", {
              name: this.ruleForm.name,
              idCard: this.ruleForm.idCard,
              roomNumber: this.ruleForm.roomNumber,
              sex: this.ruleForm.sex,
              phone: this.ruleForm.phone,
              birthday: this.ruleForm.birthday,
              checkInDate: this.ruleForm.checkInDate,
            })
            .then((response) => {
              that.response = response.data;
              alert(that.response.msg);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      this.getUsersInfo();
    },
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$axios
            .post("http://zzay0132.mynatapp.cc/elderly/update", {
              name: this.ruleForm2.name,
              idCard: this.ruleForm2.idCard,
              roomNumber: this.ruleForm2.roomNumber,
              sex: this.ruleForm2.sex,
              phone: this.ruleForm2.phone,
              birthday: this.ruleForm2.birthday,
              checkInDate: this.ruleForm2.checkInDate,
              firstGuardianName: this.ruleForm2.firstGuardianName,
              firstGuardianRelationship: this.ruleForm2.firstGuardianRelationship,
              firstGuardianPhone: this.ruleForm2.firstGuardianPhone,
              firstGuardianWechat: this.ruleForm2.firstGuardianWechat,
            })
            .then(function (response) {
              that.response = response.data;
              alert(that.response.msg+that.ruleForm2.roomNumber);
              that.$emit("listencurrent", [that.response]);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      this.getUsersInfo();
    },
    resetForm(formName) {
      this.ruleForm.name = "";
      this.ruleForm.phone = "";
      this.ruleForm.roomNumber = "";
      this.ruleForm.idCard = "";
      this.ruleForm.sex = "";
      this.ruleForm.CheckInDate = "";
      this.ruleForm.birthday = "";
    },
  },
};
</script>
